<!DOCTYPE html>
<html>
<head>
    <title>供应商列表</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            display: flex;
            flex-direction: column;
            align-items: center; /* 垂直居中 */
        }
        h1 {
            color: #333;
            margin: 20px 0;
        }
        .flash {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 80%;
            text-align: center;
        }
        .flash.error {
            background-color: #ffe6e6;
            border-color: #ffcccc;
            color: #b30000;
        }
        .flash.success {
            background-color: #e6ffe6;
            border-color: #ccffcc;
            color: #006600;
        }
        table {
           /*  width: 100%; 使表格宽度占满容器 */
            width: 1200px;
            border-collapse: collapse; /* 合并边框 */
            margin: 0 auto; /* 上下外边距为 0，左右外边距自动，实现水平居中 */
        }
        th, td {
            padding: 10px;
            border: 1px solid #ccc;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
        a {
            display: inline-block; /* 改为行内块元素 */
            margin: 0 5px; /* 调整间距 */
            text-decoration: none;
            color: #007BFF;
            font-size: 16px;
        }
        a:hover {
            text-decoration: underline;
        }
        .delete-button {
            color: #dc3545; /* 红色 */
            cursor: pointer;
        }
        .delete-button:hover {
            color: #a71d2a; /* 更深的红色 */
        }
        .add-amount-button {
            color: #28a745; /* 绿色 */
            cursor: pointer;
        }
        .add-amount-button:hover {
            color: #218838; /* 更深的绿色 */
        }
        .view-deposits-button {
            color: #17a2b8; /* 蓝色 */
            cursor: pointer;
        }
        .view-deposits-button:hover {
            color: #138496; /* 更深的蓝色 */
        }
        form {
            display: inline; /* 表单行内显示 */
        }
        .allow-overdraft-checkbox {
            margin: 0 5px;
        }

        .search-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        .search-input {
            width: 150px;
            padding: 8px;
            margin-right: 10px;
        }
        .search-button {
            padding: 8px 16px;
        }
        .pagination {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }
        .pagination a, .pagination span {
            padding: 8px 15px;
            margin: 0 5px;
            background-color: #f2f2f2;
            color: #333;
            text-decoration: none;
            border-radius: 4px;
        }
        .pagination a:hover, .pagination .active {
            background-color: #007BFF;
            color: white;
        }
        .pagination .ellipsis {
            padding: 8px 15px;
            margin: 0 5px;
            color: #333;
        }

        .link-container {
            width: 100%; /* 宽度与表格一致 */
            text-align: left; /* 左对齐 */
            margin: 20px auto; /* 上下外边距，左右外边距自动 */
            max-width: 1200px; /* 与表格的最大宽度一致 */
        }
    </style>
</head>
<body>
    <h1>供应商列表</h1>
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="flash {{ category }}">{{ message }}</div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <div class="search-container">
        <form method="GET" action="{{ url_for('list_suppliers') }}">
            <input type="text" name="search" value="{{ search_query }}" placeholder="输入搜索内容" class="search-input">
            <select name="sort" class="search-input">
                <option value="name" {% if sort == 'name' %}selected{% endif %}>供应商名称</option>
                <option value="contact_person" {% if sort == 'contact_person' %}selected{% endif %}>联系人</option>
                <option value="contact_phone" {% if sort == 'contact_phone' %}selected{% endif %}>联系电话</option>
                <option value="address" {% if sort == 'address' %}selected{% endif %}>地址</option>
                <option value="created_at" {% if sort == 'created_at' %}selected{% endif %}>创建时间</option>
            </select>
            <select name="order" class="search-input">
                <option value="asc" {% if order == 'asc' %}selected{% endif %}>升序</option>
                <option value="desc" {% if order == 'desc' %}selected{% endif %}>降序</option>
            </select>
            <button type="submit" class="search-button">搜索</button>
        </form>
    </div>

    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>供应商名称</th>
                <th>账户金额</th>
                <th>联系人</th>
                <th>联系电话</th>
                <th>地址</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for supplier in suppliers.items %}
            <tr>
                <td>{{ supplier.id }}</td>
                <td>{{ supplier.name }}</td>
                <td>{{ supplier.prepaid_amount | round(2) }} 元</td>
                <td>{{ supplier.contact_person }}</td>
                <td>{{ supplier.contact_phone }}</td>
                <td>{{ supplier.address }}</td>
                <td>
                    <a href="{{ url_for('supplier_supplies', supplier_id=supplier.id) }}">查看供货明细</a>
                    <a href="{{ url_for('add_supplier_amount', supplier_id=supplier.id) }}">调整存入金额</a>
                    <a href="{{ url_for('view_supplier_deposits', supplier_id=supplier.id) }}">查看存入明细</a>
                    <a href="{{ url_for('edit_supplier', supplier_id=supplier.id) }}">编辑</a>
                    <form action="{{ url_for('delete_supplier', supplier_id=supplier.id) }}" method="POST" onsubmit="return confirm('确定要删除该供应商吗？');">
                        <button type="submit" class="delete-button">删除</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <div class="pagination">
        {% if suppliers.has_prev %}
            <a href="{{ url_for('list_suppliers', page=suppliers.prev_num, search=search_query, sort=sort, order=order) }}">上一页</a>
        {% endif %}
        
        {% for page_num in suppliers.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
            {% if page_num %}
                {% if page_num == suppliers.page %}
                    <span class="active">{{ page_num }}</span>
                {% else %}
                    <a href="{{ url_for('list_suppliers', page=page_num, search=search_query, sort=sort, order=order) }}">{{ page_num }}</a>
                {% endif %}
            {% else %}
                <span class="ellipsis">…</span>
            {% endif %}
        {% endfor %}
        
        {% if suppliers.has_next %}
            <a href="{{ url_for('list_suppliers', page=suppliers.next_num, search=search_query, sort=sort, order=order) }}">下一页</a>
        {% endif %}
    </div>
    
    <div class="link-container">
        <a href="{{ url_for('add_supplier') }}">添加新供应商</a>
        <a href="{{ url_for('index') }}">返回主页</a>
    </div>
</body>
</html>